<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="https://kc.kagura.me/" name="KCrawler官网">
    <meta content="https://www.kagura.me/" name="鹞之神乐">
    <meta content="https://github.com/KingFalse/KCrawler" name="GitHub">
    <title>KCrawler-开源云爬虫</title>
    <link href="/css/select.css" rel="stylesheet" type=text/css>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <link href="/css/semantic/semantic.min.css" rel="stylesheet" type="text/css">
    <script src="/js/semantic/semantic.min.js"></script>
    <script src="/js/mask.js"></script>
    <script src="/js/select.js"></script>
</head>
<body>
<div class="header">
    <ul class="content">
        <li>
            <input class="btn" id="return" type="button" value="首页">
        </li>
        <li id="alert" style="width: 80%;text-align: center"></li>
        <li class="right">
            <input class="btn" id="btn-next" onclick="step1();" type="button" value="下一步">
        </li>
    </ul>
    <!--临时变量，记录当前被点击的cssSelector-->
    <input id="selector" type="hidden" value="">
    <form action="/select/detail" id="post-detail" method="post">
        <!--记录要爬取的链接-->
        <input id="targetSelector" name="targetSelector" th:value="${targetSelector}" type="hidden">
        <!--记录要翻页的链接-->
        <input id="pageSelector" name="pageSelector" th:value="${pageSelector}" type="hidden">
        <!--记录样本页面链接-->
        <input id="sampleUrl" name="sampleUrl" th:value="${sampleUrl}" type="hidden">
        <!--记录主页面链接-->
        <input id="mainUrl" name="mainUrl" th:value="${mainUrl}" type="hidden">
        <!--记录traceId-->
        <input id="traceId" name="traceId" th:value="${traceId}" type="hidden">
    </form>
</div>
<div class="main">
    <iframe frameborder="0" height="1000px" id="mainiframe" name="mainiframe" onload="startInit();" scrolling="auto"
            src=""
            th:srcdoc="${srcdoc}" width="100%"></iframe>
</div>


<div class="table-wrapper" style="display: none">
    <table class="fl-table">
        <thead>
        <tr>
            <th>结果为代码</th>
            <th>结果为文本</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<script lang="javascript">
    $("#return").click(function () {
        window.location.href = "/";
    });

    function startInit() {

        $("#alert").text("请点选需要抓取的元素");

        pageInit();
        /**
         * 点击元素后输出cssSelector
         * @param ev
         */
        document.getElementById('mainiframe').contentWindow.document.onclick = function (event) {
            $("#btn-next").show();
            var dom = document.getElementById('mainiframe').contentWindow.document.elementFromPoint(event.clientX, event.clientY);
            var path = getCssPath(dom);
            console.log("被点击的元素：" + path);

            $(".fl-table tbody").html("");
            $(".fl-table tbody").append(
                '<tr>' +
                '   <td>' +
                '       <div class="ui toggle checkbox">\n' +
                '           <input id="checkbox1" type="checkbox" 2type="text" checked>\n' +
                '           <label></label>\n' +
                '       </div>' +
                '   </td>' +
                '   <td>' +
                '       <div class="ui toggle checkbox">\n' +
                '           <input id="checkbox2" type="checkbox" 2type="code">\n' +
                '           <label></label>\n' +
                '       </div>' +
                '   </td>' +
                '</tr>' +
                '<tr>' +
                '<td><div style="height:' + $(window).height() * 0.5 + 'px;width:' + $(window).width() * 0.4 + 'px"><textarea readonly style="border: none;width: 100%;height: 100%" id="show-code"></textarea></div></td>' +
                '<td><div style="height:' + $(window).height() * 0.5 + 'px;width:' + $(window).width() * 0.4 + 'px"><textarea readonly style="border: none;width: 100%;height: 100%" id="show-text"></textarea></div></td>' +
                '</tr>' +
                '');


            $("#mainiframe").contents().find(path).each(function () {
                console.log($(this).prop("outerHTML"));
                $('#show-code').text($('#show-code').text() + $(this).prop("outerHTML"));
            });
            $('#show-code').text($('#show-code').text().replace("outline: rgb(255, 94, 82) solid 3px;", ""));
            $('#show-code').text($('#show-code').text().replace(" style=\"\"", ""));
            $('#show-text').text($("#mainiframe").contents().find(path).text());
            $("#btn-next").val("确定");
            $('.main').mask('<div>' + $(".table-wrapper").html() + '</div>', function () {
                if (map.size <= 0) {
                    $("#btn-next").hide();
                }
            }, "x", true);
            $(".table-wrapper .fl-table tbody").html("");

            addToMap = function () {
                $.each($('input[type=checkbox]'), function () {
                    if ($(this).prop("checked") == true) {
                        if (map.has(path)) {
                            map.get(path).add($(this).attr("2type") + "");
                        } else {
                            map.set(path, new Set([$(this).attr("2type")]));
                        }
                    }
                });
                $('.main').unmask();
                $("#btn-next").val("下一步");
                $("#btn-next").attr("onclick", "nextstep();");

            };

            $("input[type=checkbox]").change(function () {
                if ($("#checkbox1").prop("checked") == false && $("#checkbox2").prop("checked") == false) {
                    $("#btn-next").val("取消");
                    $("#btn-next").attr("onclick", "$('.main').unmask();");
                } else {
                    $("#btn-next").val("确定");
                    $("#btn-next").attr("onclick", "addToMap();");
                }
            });

            $("#btn-next").val("确定");
            $("#btn-next").attr("onclick", "addToMap();");


        };

        changeFrameHeight();

        $("#btn-next").hide();
    }


    window.onresize = function () {
        changeFrameHeight();
    };
    $(function () {
        changeFrameHeight();
    });


    function nextstep() {
        getCount = function () {
            let mcount = 0;
            map.forEach(function (v, k) {
                mcount += v.size;
            });
            return mcount;
        };


        var showdetail = "" +
            "<table class=\"fl-table\">\n" +
            "    <thead>\n" +
            "    <tr>\n" +
            "        <th colspan=\"2\">爬取预览</th>\n" +
            "    </tr>\n" +
            "    </thead>\n" +
            "    <tbody>\n" +
            "    <tr>\n" +
            "        <td width='10%'>目标链接：</td>\n" +
            "        <td width='25%'>当前页</td>\n" +
            "    </tr>\n" +
            "    <tr>\n" +
            "        <td>目标翻页：</td>\n" +
            "        <td>当前页</td>\n" +
            "    </tr>\n" +
            "    <tr>\n" +
            "        <td>翻页类型：</td>\n" +
            "        <td>" +
            "            <select id='targetPageType' class=\"ui dropdown\">\n" +
            "              <option value=\"0\" selected='selected'>传统href静态链接</option>\n" +
            "              <option value=\"1\" disabled='disabled'>无限下拉</option>\n" +
            "              <option value=\"2\" disabled='disabled'>下拉+静态链接</option>\n" +
            "            </select>" +
            "        </td>" +
            "    </tr>\n" +
            "    <tr>\n" +
            "        <td>爬取页数：</td>\n" +
            "        <td>" +
            "            <select id='targetPageCount' class=\"ui dropdown\">\n" +
            "              <option value=\"1\">1页</option>\n" +
            "              <option value=\"2\">2页</option>\n" +
            "              <option value=\"5\">5页</option>\n" +
            "              <option value=\"10\">10页</option>\n" +
            "              <option value=\"-1\">无限</option>\n" +
            "            </select>" +
            "        </td>\n" +
            "    </tr>\n" +
            "    <tr>\n" +
            "        <td>解析元素：</td>\n" +
            "        <td>" + getCount();
        +"个</td>\n" +
        "    </tr>\n" +
        "    </tbody>\n" +
        "</table>" +
        "";
        $("#btn-next").val("确定");
        $('.main').mask('<div>' + showdetail + '</div>', function () {
            $("#btn-next").val("下一步");
            $("#btn-next").attr("onclick", "nextstep();");
        }, "x", true);
        $("#btn-next").val("开始爬取");
        $("#btn-next").attr("onclick", "doCrawler();");
    }

    /**
     * 提交爬取
     */
    function doCrawler() {
        var body = {};
        body.targetSelector = $("#targetSelector").val();
        body.pageSelector = $("#targetSelector").val();
        body.targetPageType = $("#targetPageType").val();
        body.targetPageCount = $("#targetPageCount").val();
        body.startUrl = $("#mainUrl").val();
        body.traceId = $("#traceId").val();

        var targetNodes = {};

        map.forEach(function (v, k) {
            let list = [];
            v.forEach(function (i) {
                list[list.length] = i;
            });
            targetNodes[k] = list;
        });

        body.targetNodes = targetNodes;

        $.ajax({
            contentType: 'application/json',
            type: 'POST',
            url: "/docrawler",
            data: JSON.stringify(body),
            success: function (message) {
                window.location.href = "/loading?traceId=" + $("#traceId").val();
            },
            error: function (message) {
                alert("提交数据失败，请稍后尝试！" + message);
            }
        });

    }

    var map = new Map();
</script>
</body>
</html>